<template>

  <div class="AddOrUpdate_main add_container main_container">

    <div class="main_main card_shadow">
      <div class="personalCenter_div">
        <div class="avatar_div_container">
          <div class="avatar_div">
            <img :src="avatar" style="object-fit: contain;">
            <a class="avatar_button" @click="changeAvatar">修改头像</a>
          </div>
        </div>
      </div>
      <div class="name_div">
        {{ formData.realName }}
      </div>
      <div class="info">
        <div class="label">登录账号:</div>
        <div class="value2">{{ formData.userName }}</div>
      </div>
      <div class="info">
        <div class="label">账号密码：</div>
        <div class="button" @click="changePassword">重置密码</div>
      </div>
      <div v-if="codeStatus" class="info">
        <div class="label">微信：</div>
        <div class="value">{{ unionId?'已绑定':'未绑定' }}</div>
        <div v-if="unionId" class="button2" @click="unbindWx">解绑</div>
        <div v-else class="button2" @click="bindWx">绑定</div>
      </div>
      <div v-if="pointsGetStatus==1 && codeStatus">
        <div class="my_medal">我的奖章</div>
        <div class="medal">
          <div v-for="item in tableData" :key="item.index">
            <svg-icon style="font-size:50px" :icon-class="item.name" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { taskList } from '@/api/common/personalCenter'
import { updateUser as update, getUser as getById } from '@/api/system/user'
import { mapGetters } from 'vuex'
import wxScan from './wxScan.vue'
import { unbindQrcode } from '@/api/system/personalCenter'
import AvatarUpload from '../AvatarUpload'
import ChangePassword from '../ChangePassword'
export default {
  name: 'PersonalAccount',
  computed: {
    ...mapGetters([
      'userId', 'userName', 'companyId', 'avatar', 'pointsGetStatus'
    ])
  },
  data() {
    return {
      taskList: [
        { icon: '每日登录', title: '每日登录', content: '登录系统、赢得极分', maxNumber: 3, currentNumber: 1 },
        { icon: '邀请同事', title: '邀请同事', content: '邀请同事加入公司，与你一起赚极分', maxNumber: 3, currentNumber: 1 },
        { icon: '基础数据录入', title: '基础数据录入', content: '新增一条基础数据，激活系统，赚极分', maxNumber: 1, currentNumber: 1 },
        { icon: '基础数据导入', title: '基础数据导入', content: '完成一次基础数据导入，完善系统，赚极分', maxNumber: 1, currentNumber: 1 },
        { icon: '新增单据', title: '新增单据', content: '新增系统单据，当日可获得1极分', maxNumber: 2, currentNumber: 1 },
        // { icon: '引用数据', title: '引用数据', content: '个人创建数据被引用，当日可获得1极分', maxNumber: 2, currentNumber: 1 },
        { icon: '执行单据', title: '执行单据', content: '执行单据任务，当日可获得1极分', maxNumber: 2, currentNumber: 1 }
      ],
      tableData: [],
      formData: {
        userId: undefined,
        realName: undefined,
        email: undefined,
        deptName: undefined,
        deptId: undefined,
        expirationTime: '',
        userName: ''
      },
      unionId: '',
      codeStatus: '',
      isAdmin: false,
      edit1: false,
      edit2: false,
      rules: {
        name: [
          { required: true, message: '公司名称不能为空', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.unionId = this.$store.state.user.unionId
    this.codeStatus = this.$store.state.user.codeStatus
    this.getById()
    this.getTaskList()
  },
  methods: {
    getTaskList() {
      taskList({ userId: this.$store.state.user.userId }).then(res => {
        const data = res.data.map(item => {
          return Number(item.points)
        })
        // const data = [2, 2, 1, 0, 1, 2, 1]
        this.taskList.forEach((ele, index) => {
          ele.currentNumber = data[index]// 获取当前任务获得了几个徽章
          // if (ele.currentNumber > 0) {
          //   for (let i = 1; i <= ele.currentNumber; i++) {
          //     this.tableData.push({ name: ele.icon + [i] + '' })
          //   }
          // }
          for (let i = 1; i <= ele.maxNumber; i++) {
            if (ele.currentNumber >= i) {
              this.tableData.push({ name: ele.icon + [i] + '' })
            } else {
              this.tableData.push({ name: '未' + ele.icon + [i] + '' })
            }
          }
        })
      })
    },
    unbindWx() {
      unbindQrcode().then(res => {
        this.$message.success('解绑成功')
        setTimeout(() => {
          this.$router.go(0)
        }, 1000)
      })
    },
    bindWx() {
      this.$layer.iframe({// 弹框
        content: {
          content: wxScan, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['300px', '300px'],
        title: '绑定微信', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    getById() {
      getById(this.userId).then(res => {
        this.formData.deptId = res.data.dept ? res.data.dept.deptId : ''
        this.formData.deptName = res.data.dept ? res.data.dept.deptName : ''
        this.formData.realName = res.data.realName
        this.formData.userName = res.data.userName
        this.$store.state.user.userName = res.data.realName
        this.formData.email = res.data.email
        this.formData.userId = res.data.userId
        this.formData.expirationTime = res.roles[0].expirationTime
        this.isAdmin = res.data.isAdmin
        this.edit1 = false
        this.edit2 = false
      })
    },
    onSubmit() {
      let tag = true
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (tag && !this.formData.realName) {
        tag = false
        this.$message({
          message: '姓名不能为空',
          type: 'warning'
        })
      }
      if (tag && this.formData.email && !reg.test(this.formData.email)) {
        tag = false
        this.$message({
          message: '邮箱格式不正确',
          type: 'warning'
        })
      }
      if (tag) {
        update(this.formData).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })

          this.getById()
        })
      }
    },
    changeAvatar() { // 修改头像
      this.$layer.iframe({// 弹框
        content: {
          content: AvatarUpload, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['880px', '600px'],
        title: '修改头像', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    changePassword() { // 修改头像
      this.$layer.iframe({// 弹框
        content: {
          content: ChangePassword, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['440px', '600px'],
        title: '修改密码', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    }
  }
}
</script>

<style lang="less" scoped>
.medal{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  div{
    width: 20%;
    text-align: center;
    margin-bottom: 15px;
  }
  // justify-content: space-evenly;
}
.card_shadow{
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px !important;
}
.my_medal{
  font-size: 14px;
  margin-top: 115px;
  color: #333333;
}
.info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ECECEC;
  // padding:0 20px ;
  .label{
    width: 120px;
    padding: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .value{
        // padding: 10px;
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
         font-size: 14px;
        font-weight: 400;
        color: #333333;
        text-align: center;
  }
  .value2{
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
         font-size: 14px;
        font-weight: 400;
        color: #333333;
        width: 150px;
        text-align: right;
  }
  .button{
    width: 100px;text-align:right;
    color: #387bfc;
    cursor: pointer;
  }
  .button2{
    width: 100px;text-align:right;
    color: #5ECC71;
    cursor: pointer;
  }
}
.formItem_header{
  font-weight: bold;
}
    .name_div{
      margin-top: 20px;
      margin-bottom: 30px;
      width: 100%;
      text-align: center;
      font-size: 24px;
      // display: flex;justify-content: center;
      // flex-direction: column;
      // .name_div_name{
      //   font-size: 24px;
      //   // height: 40px;line-height: 40px;
      //   font-weight: bold;
      // }
    }
.main_main{
  margin: 0;
  padding-top: 0;
  padding: 0 20px;
  .personalCenter_div{
    margin-top: 20px;
    width: 100%;height: 100px;
    display: flex;justify-content: center;align-items: center;
    .avatar_div_container{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      // margin-right: 40px;
      // margin-left: 20px;
      display: flex;justify-content: flex-start;align-items: center;
    }
    .avatar_div{
      height: 100%;
      width: 100%;

      position: relative;
      img{
        width: 100px;height: 100px;
        border-radius: 50%;
      }
      .avatar_button{
        position: absolute;
        bottom: 0;left: 0;
        width: 102px;height: 24px;
        // border-radius: 50%;
        justify-content: center;align-items: center;
        font-size: 12px;
        background-color: #3333334d;
        display: none;
        color: white;
      }
    }
    .avatar_div:hover{
      .avatar_button{
        display: flex;
      }
    }

  }

  .accountInfo_div{
    margin: 20px 20px 0;
    .accountInfo_item{
      display: flex;justify-content: space-between;align-items: center;
      border-bottom: 1px solid rgb(224, 224, 224);
      .accountInfo_item_name{
        width: 150px;
        height: 40px;display: flex;align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
      .accountInfo_item_value{
       display: flex;align-items: center;
        height: 40px;
        .value_show{
          display: flex;align-items: center;justify-content: space-between;
          .value_show_name{
            height: 100%;
            display: flex;align-items: center;
          }
          .value_show_edit{
            height: 100%;
            display: flex;align-items: center;
            margin-left: 20px;
            font-size: 18px;
          }
        }
        .show_operate{
          width: 100%;justify-content: space-between;
          .value_show_operate{
            color: #387bfc;
          }
        }
        .value_edit{
          width: 100%;
          /deep/ .el-input__inner{
            height: 30px;
          }
        }
      }
    }
  }
}

</style>
